<!--
 * @Descripttion: 渠道管理-分配码
 * @Author: 颜博骏 bojun@ssc-hn.com
 * @Date: 2024-04-11
 * @LastEditors: 何伟伦 weilun@ssc-hn.com
 * @LastEditTime: 2024-05-10
-->
<template>
  <div class="edit">
    <a-modal v-model:visible="visible" title="分配码" @ok="onOk" @cancel="onCancel">
      <a-form ref="formRef" :model="formState" :label-col="{ span: 4 }" autocomplete="off">
        <a-form-item label="批次编号" name="batchNumber">
          <a-input v-model:value="formState.batchNumber" />
        </a-form-item>
        <a-form-item label="码值">
          <a-input v-model:value="formState.codeStart" style="width: 135px" />
          <span style="margin: 0 8px">~</span>
          <a-input v-model:value="formState.codeEnd" style="width: 135px" />
          <a-button type="primary" shape="round" :icon="h(SearchOutlined)" @click="searchCode" style="margin-left: 10px">查询</a-button>
        </a-form-item>

        <!-- <div style="display: flex">
          <a-form-item label="码值" name="codeStart" :label-col="{ offset: 6, span: 6 }" :wrapper-col="{ offset: 1, span: 12 }" class="num-range">
            <a-input v-model:value="formState.codeStart" style="width: 120px" />
          </a-form-item>
          <span style="margin: 0 8px">~</span>
          <a-form-item name="codeEnd" :wrapper-col="{ span: 12 }" class="num-range">
            <a-input v-model:value="formState.codeEnd" />
          </a-form-item>
          <a-button type="primary" shape="round" :icon="h(SearchOutlined)" @click="searchCode">查询</a-button>
        </div> -->
        <div v-if="checkFlag === 1">
          <p style="text-align: center">{{ `共查询到${codeData.total}个码，其中正常状态${codeData.normal}个,作废状态${codeData.cancel}个` }}</p>
        </div>
      </a-form>
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
  import { SearchOutlined } from '@ant-design/icons-vue'
  import { type FormInstance, message } from 'ant-design-vue'
  import { computed, h, reactive, ref, watch } from 'vue'

  import { requestDistributionConfirm, requestDistributionSearch } from '/@/api/business/tracecode/channel/index'
  import { HttpCodeEnum } from '/@/enums/httpEnum'

  const props = defineProps({
    visible: { type: Boolean, default: false },
    channelId: { type: String, default: '' },
  })
  const checkFlag = ref(0)
  const formRef = ref<FormInstance>()
  const formState = ref({
    batchNumber: '',
    codeStart: '',
    codeEnd: '',
  })

  const codeData = reactive({
    total: 0,
    normal: 0,
    cancel: 0,
  })
  /** 角色-选项 */

  const emits = defineEmits(['update:visible'])

  const visible = computed({
    get: () => props.visible,
    set: (val) => emits('update:visible', val),
  })

  watch(
    () => visible.value,
    (newVal, oldVal) => {
      if (newVal && !oldVal) {
        // initData()
      }
    },
  )

  const searchCode = async () => {
    const params = { ...formState.value }
    const { responseCode, responseData } = await requestDistributionSearch(params)
    if (responseCode === HttpCodeEnum.SUCCESS) {
      message.success(`查询成功`)
      checkFlag.value = 1
      const { total, normal, cancel } = responseData
      codeData.total = total
      codeData.normal = normal
      codeData.cancel = cancel
    }
  }
  const resetForm = () => {
    formRef.value?.resetFields()
  }

  const onOk = async () => {
    console.log('onOk')
    const params = { ...formState.value, channelId: props.channelId }
    const { responseCode } = await requestDistributionConfirm(params)
    if (responseCode === HttpCodeEnum.SUCCESS) {
      message.success('分配成功')
    }
    visible.value = false
    resetForm()
  }

  const onCancel = () => {
    visible.value = false
    resetForm()
  }
</script>

<style lang="less" scoped>
  .num-range {
    width: 30%;
  }
</style>
